<!doctype html>
<html>
	<head>
		<title>Ext-Core: Cross-Browser Javascript Library v3.1.0--Collected By Hroze Soft</title>
		<META http-equiv=Content-Type content="text/html; charset=utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css"
			href="examples/carousel/carousel.css" />
		
		<link rel="stylesheet" type="text/css" href="css/product.css" />
		<script src="ext-core.js"></script>

	</head>

	<body>

		<div id="viewport">
			<div id="hd">
				<h1>
					<a href="http://www.sencha.com" title="Home"><span>Extjs.com</span> </a>
				</h1>
				<table cellspacing="0" class="nav main-nav">
					<tr>
						<td class="active">
							<a id="OverView" href="index.html"><span>OverView</span> </a>
						</td>
						<td>
							<a id="manual-herf" href="manual/index.html"><span>Manual</span> </a>
						</td>
						<td>
							<a id="manual-herf-cn" href="manual_zh_cn/index.html"><span>中文手册</span> </a>
						</td>
						<td>
							<a id="docs-href" href="docs/index.html"><span>API Documentation</span> </a>
						</td>
						<td>
						<a id="hroze-com" href="http://hroze.com"><span>Hroze Soft</span> </a>
					</td>
					</tr>
				</table>

				<table cellspacing="0" class="sub-nav">
					<tr>
						<td>
							<a href="http://code.google.com/p/hroze-ext-core/">Google
								Code Home</a>
						</td>
						<td class="spacer">
							<img src="images/c-sep.gif">
						</td>
						<td>
							<a href="index.html">Overview</a>
						</td>
					</tr>
				</table>

			</div>

			<div id="bd">
				<div class="left-column">

					<script src="examples/carousel/carousel.js"></script>

					<h3>
						Ext Core: Cross-Browser Javascript Library
					</h3>

					<script>
	Ext.onReady(function() {
		var carousel = new Ext.ux.Carousel('examples-carousel', {
			itemSelector : 'div.carousel-item',
			interval : 7,
			autoPlay : true,
			transitionType : 'fade',
			hideNavigation : true,
			freezeOnHover : true
		});

		var shortcuts = Ext.query('#carousel-navigation-shortcuts > img');

		Ext.fly('carousel-navigation-shortcuts').on('click', function() {
			var index = shortcuts.indexOf(this.dom);
			carousel.pause();
			Ext.fly('nav-pause').radioClass('nav-hide');
			carousel.setSlide(index);
		}, null, {
			delegate : 'img'
		});

		carousel.on('change', function(slide, index) {
			var shortcut = Ext.get(shortcuts[index]), arrow = Ext
					.get('carousel-navigation-arrow');

			shortcut.radioClass('active');
			var left = shortcut.getOffsetsTo('carousel-navigation')[0]
					+ (shortcut.getWidth() / 2) - (arrow.getWidth() / 2);
			arrow.setLeft(left + 'px');
		});

		Ext.fly('carousel-navigation-buttons').on('click', function() {
			switch (this.dom.id) {
			case 'nav-play':
				carousel.play();
				this.radioClass('nav-hide');
				break;
			case 'nav-pause':
				carousel.pause();
				this.radioClass('nav-hide');
				break;
			case 'nav-next':
				carousel.pause().next();
				Ext.fly('nav-pause').radioClass('nav-hide');
				break;
			case 'nav-prev':
				carousel.pause().prev();
				Ext.fly('nav-pause').radioClass('nav-hide');
				break;
			}
		}, null, {
			delegate : 'img'
		});

		if (Ext.isIE6) {
			// force reflow of arrow in ie6
			Ext.fly('carousel-navigation-arrow').setStyle('display', 'none')
					.setStyle('display', 'block');
		}
	});
</script>

					<div id="examples-carousel">
						<div id="carousel-navigation-buttons">
							<img id="nav-prev" src="images/prev-icon.gif">
							<img id="nav-play" src="images/play-icon.gif" class="nav-hide">
							<img id="nav-pause" src="images/pause-icon.gif">
							<img id="nav-next" src="images/next-icon.gif">
						</div>
						<div class="carousel-item">
							<a href="manual/index.html" target="_blank"
								title="Click to go to the manual"><img
									src="images/manual-icon-normal.png"> </a>
							<h4>
								<a href="manual/index.html" target="_blank"
									title="Click to go to the manual">Manual</a>
							</h4>
							<p>
								Whether you are new to or an experienced user of Ext, the manual
								is an extensive resource in which everyone will be able to find
								and learn something new. The manual itself is a great example of
								how you can leverage Ext Core to spice up your website with a
								minimal amount of elegant and readable code.
								<a href="manual/index.html" class="carousel-view-example"
									target="_blank" title="Click to go to the manual">Read
									Manual</a>
							</p>
						</div>
						<div class="carousel-item">
							<a href="examples/carousel/index.html" target="_blank"
								title="Click to see the Carousel Example"><img
									src="images/carousel-icon-normal.png"> </a>
							<h4>
								<a href="examples/carousel/index.html" target="_blank"
									title="Click to see the Carousel Example">Carousel</a>
							</h4>
							<p>
								The Carousel example provides a widget for browsing a set of
								objects. It can be configured to meet any of your specific
								requirements - auto-play, animations, custom navigation dynamic
								content and more.
								<a href="examples/carousel/index.html"
									class="carousel-view-example" target="_blank"
									title="Click to see the Carousel Example">View Example</a>
							</p>
						</div>
						<div class="carousel-item">
							<a href="examples/lightbox/index.html" target="_blank"
								title="Click to see the Lightbox Example"><img
									src="images/lightbox-icon-normal.png"> </a>
							<h4>
								<a href="examples/lightbox/index.html" target="_blank"
									title="Click to see the Lightbox Example">Lightbox</a>
							</h4>
							<p>
								The Lightbox example provides a widget used to overlay images on
								the current page. It's simple to set up by registering a CSS
								selector. When you register a group of images you can browse
								through them within the Lightbox.
								<a href="examples/lightbox/index.html"
									class="carousel-view-example" target="_blank"
									title="Click to see the Lightbox Example">View Example</a>
							</p>
						</div>
						<div class="carousel-item">
							<a href="examples/lightbox/index.html" target="_blank"
								title="点这里查看lightbox中文版示例"><img
									src="images/lightbox-icon-normal.png"> </a>
							<h4>
								<a href="examples/lightbox_zh_cn/index.html" target="_blank"
									title="点这里查看lightbox中文版示例">Lightbox中文版</a>
							</h4>
							<p>
								已将原版中的英文图片替换为中文，功能基本上没有变化.另外在显示页面时已经整个文档遮盖。
								<a href="examples/lightbox/index.html"
									class="carousel-view-example" target="_blank"
									title="点这里查看lightbox中文版示例">View Example</a>
							</p>
						</div>
						<div class="carousel-item">
							<a href="examples/menu/index.html" target="_blank"
								title="Click to see the Menu Example"><img
									src="images/menu-icon-normal.png"> </a>
							<h4>
								<a href="examples/menu/index.html" target="_blank"
									title="Click to see the Menu Example">Menu</a>
							</h4>
							<p>
								The Menu example provides a widget that converts an existing
								list of links on the page to either a horizontal or vertical
								menu. There are many ways in which you can configure the menu,
								including different types of animations, setting the active
								item, delays and listening to several useful events.
								<a href="examples/menu/index.html" class="carousel-view-example"
									target="_blank" title="Click to see the Menu Example">View
									Example</a>
							</p>
						</div>
						<div class="carousel-item">
							<a href="examples/jsonp/index.html" target="_blank"
								title="Click to see the JSONP Example"><img
									src="images/jsonp-icon-normal.png"> </a>
							<h4>
								<a href="examples/jsonp/index.html" target="_blank"
									title="Click to see the JSONP Example">JSONP</a>
							</h4>
							<p>
								The JSONP example shows how you can fetch JSON data from a
								different domain. It includes a class you can use to connect to
								any possible web service that supports the JSON format. In this
								example we use the Flickr API to fetch the latest photos for any
								keyword.
								<a href="examples/jsonp/index.html"
									class="carousel-view-example" target="_blank"
									title="Click to see the JSONP Example">View Example</a>
							</p>
						</div>
						<div class="carousel-item">
							<a href="examples/tabs/index.html" target="_blank"
								title="Click to see the Simple Tabs Example"><img
									src="images/tabs-icon-normal.png"> </a>
							<h4>
								<a href="examples/tabs/index.html" target="_blank"
									title="Click to see the Simple Tabs Example">Simple Tabs</a>
							</h4>
							<p>
								The Simple Tabs example shows how you can create powerful
								navigation with only a few lines of code using Ext Core. By
								making smart use of event delegation, it is easy to add
								additional tabe or remove existing ones.
								<a href="examples/tabs/index.html" class="carousel-view-example"
									target="_blank" title="Click to see the Simple Tabs Example">View
									Example</a>
							</p>
						</div>
						<div class="carousel-item">
							<a href="examples/rating/index.html" target="_blank"
								title="Click to see the Simple Tabs Example"><img
									src="images/rating-icon-normal.png"> </a>
							<h4>
								<a href="examples/rating/index.html" target="_blank"
									title="Click to see the Simple Tabs Example">Rating</a>
							</h4>
							<p>
								The rating example shows how you can add behavior to existing
								HTML which provides graceful degradation. It has the ability to
								show an average rating by using disabled radio controls,
								resetting your vote and split stars.
								<a href="examples/rating/index.html"
									class="carousel-view-example" target="_blank"
									title="Click to see the Rating Example">View Example</a>
							</p>
						</div>
						<div class="carousel-item">
							<a href="examples/combo/index.html" target="_blank"
								title="Click to see the Combination Example"><img
									src="images/combi-icon-normal.png"> </a>
							<h4>
								<a href="examples/combo/index.html" target="_blank"
									title="Click to see the Combination Example">Combination</a>
							</h4>
							<p>
								The Combination example shows how you can combine several of the
								powerful widgets used in the other examples. It has a menu to
								navigate several categories of photos and uses the JSONP class
								to retrieve them from Flickr. It then puts them in a carousel.
								By clicking on an image inside the carousel you can see a bigger
								sized version of the photo in the Lightbox.
								<a href="examples/combo/index.html"
									class="carousel-view-example" target="_blank"
									title="Click to see the Combination Example">View Example</a>
							</p>
						</div>
					</div>

					<div id="carousel-navigation">
						<img id="carousel-navigation-arrow" src="images/nav-arrow.gif">
						<div id="carousel-navigation-shortcuts">
							<img src="images/manual-icon-small.png" class="active" />
							<img src="images/carousel-icon-small.png" />
							<img src="images/lightbox-icon-small.png" />
							<img src="images/lightbox-icon-small.png" />
							<img src="images/menu-icon-small.png" />
							<img src="images/jsonp-icon-small.png" />
							<img src="images/tabs-icon-small.png" />
							<img src="images/rating-icon-small.png" />
							<img src="images/combi-icon-small.png" class="last-item" />
						</div>

					</div>

					<div class="content-box">
						<h5>
							Ext Core Overview
						</h5>
						<div class="box">
							<p>
								Ext Core is a cross-browser JavaScript library for building
								dynamic web pages. It includes:
							</p>
							<ul class="features">
								<li>
									<span>High performance, lightweight</span>
								</li>
								<li>
									<span>Clear, maintainable code</span>
								</li>
								<li>
									<span>An intuitive, easy to use <a
										href="docs/index.html">API</a> </span>
								</li>
								<li>
									<span>MIT Open Source licensed</span>
								</li>
							</ul>
						</div>
					</div>

					<div class="content-box">
						<h5>
							Browser Compatibility
						</h5>
						<div class="box">
							<p>
								Ext Core supports all major web browsers including:
							</p>
							<ul class="features">
								<li>
									Internet Explorer 6+
								</li>
								<li>
									FireFox 1.5+ (PC, Mac)
								</li>
								<li>
									Safari 3+
								</li>
								<li>
									Opera 9+ (PC, Mac)
								</li>
							</ul>
						</div>
					</div>
				</div>

				<div class="right-column" style="padding-top: 15px;">
					<div class="side-box">
						<div class="side-box-inner">
							<h5>
								In this Section
							</h5>
							<ul class="features">
								<li>
									<a href="http://code.google.com/p/hroze-ext-core/">Hroze Ext-core</a>
								</li>
								<li>
									<a href="index.html">Overview</a>
								</li>
								<li>
									<a
										href="http://code.google.com/p/hroze-ext-core/downloads/list">Download</a>
								</li>

								<li>
									<a href="manual/index.html">Manual</a>
								</li>
								<li>
									<a href="manual_zh_cn/index.html">简体中文手册</a>
								</li>
								<li>
									<a href="manual_zh_cn/big5.htm">繁体中文手册</a>
								</li>
								<li>
									<a href="docs/index.html">API Documentation</a>
								</li>
								<li>
									<a href="http://hroze.com">Hroze Soft</a>
								</li>

							</ul>
						</div>
					</div>
					<div class="side-box">
						<div class="side-box-inner">
							<h5>
								Related Pages
							</h5>
							<ul class="features">
								<li>
									<a href="../ext-3.2.1/examples/">Ext 3.2.1</a>
								</li>
								<li>
									<a href="../ext-2.3.0/examples/">Ext 2.3.0</a>
								</li>
								<li>
									<a href="../ext-2.0.2/examples/">Ext 2.0.2</a>
								</li>
								<li>
									<a href="../ext-1.1.1/docs/">Ext 1.1.1</a>
								</li>
								<li>
									<a
										href="http://ajax.googleapis.com/ajax/libs/ext-core/3.1/ext-core.js">Ext
										core 3.1.0 Google CDN</a>
								</li>
								<li>
									<a
										href="http://ajax.googleapis.com/ajax/libs/ext-core/3.0/ext-core.js">Ext
										core 3.0.0 Google CDN</a>
								</li>

								<li>
									<a
										href="http://extjs.cachefly.net/ext-3.2.1/examples/index.html">Ext
										3.2.1 cachefly</a>
								</li>
								<li>
									<a
										href="http://extjs.cachefly.net/ext-3.2.0/examples/index.html">Ext
										3.2.0 cachefly</a>
								</li>
								<li>
									<a href="http://extjs.cachefly.net/ext-2.3.0/docs/">Ext
										2.3.0 cachefly</a>
								</li>
								<li>
									<a href="http://extjs.cachefly.net/ext-2.2/docs/">Ext 2.2
										cachefly</a>
								</li>
								<li>
									<a href="http://extjs.cachefly.net/ext-1.1.1/docs/">Ext
										1.1.1 cachefly</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div style="clear: both"></div>
			</div>
			<!-- end bd -->

			<div id="ft">
				<ul class="nav">
					<li class="active">
						<a id="home-foot-link" href="http://www.sencha.com">Extjs.com</a>
					</li>
					<li>
						<a id="products-foot-link"
							href="http://www.sencha.com/products/core/">Ext-Core</a>
					</li>
					<li>
						<a id="support-foot-link" href="http://www.sencha.com/support">Support</a>
					</li>
					<li>
						<a id="blog-foot-link" href="http://www.sencha.com/blog/index.htm">Blog</a>
					</li>
					<li>
						<a id="store-foot-link"
							href="http://www.sencha.com/learn/Tutorials">Tutorials</a>
					</li>
					<li>
						<a id="store-foot-forum"
							href="http://www.sencha.com/forum/forumdisplay.php?48-Ext-Core">Forum</a>
					</li>
				</ul>
				<div class="copy">
					&copy; 2006-2010 Sencha Inc.
				</div>
			</div>

		</div>
		<!-- end viewport -->
	</body>
</html>
